<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/company/list' }">服务公司</el-breadcrumb-item>
        <el-breadcrumb-item>添加</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer addCompanyPage">
      <!-- 添加服务公司表单 -->
      <div class="customform shebaoform">
        <el-form
          :inline="true"
          :model="company"
          :rules="rules"
          ref="company"
          label-width="130px"
          label-position="left"
        >
          <div class="el-form--inline">
            <el-form-item label="服务类类别" prop="serviceType">
              <el-select v-model="company.serviceType" @change="gobalValidate">
                <el-option value="0" label="社保/公积金"></el-option>
                <el-option value="1" label="商保"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="公司名称" prop="name">
              <el-input v-model="company.name" placeholder></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="rincipal">
              <el-input v-model="company.rincipal" placeholder></el-input>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="company.phone" type="tel" placeholder="输入电话号码"></el-input>
            </el-form-item>
            <el-form-item label="联系地址" prop="citySelect">
              <el-cascader
                placeholder="请选择"
                :options="cities"
                v-model="company.citySelect"
                filterable
              ></el-cascader>
              <el-input
                ref="infoAddr"
                class="address-info-input"
                v-model="company.addr"
                placeholder="详细地址"
              ></el-input>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="客户社保截止日">
              <div class="city-select">
                <el-select v-model="company.socialCustomerDealind" placeholder>
                  <el-option label="当月" value="0"></el-option>
                  <el-option label="上月" value="1"></el-option>
                </el-select>
                <el-select v-model="company.socialCustomerDealindDay" placeholder>
                  <el-option :label="item+'日'" :value="item" v-for="item in 31" :key="item"></el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="客户公积金截止日">
              <div class="city-select">
                <el-select v-model="company.accfundCustomerDealind" placeholder>
                  <el-option label="当月" value="0"></el-option>
                  <el-option label="上月" value="1"></el-option>
                </el-select>
                <el-select v-model="company.accfundCustomerDealindDay" placeholder>
                  <el-option :label="item+'日'" :value="item" v-for="item in 31" :key="item"></el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!-- 添加服务公司表单结束 -->
    </div>

    <div v-if="company.serviceType==0">
      <!-- 社保账户 -->
      <div class="mainContainer m-t20">
        <el-tabs class="custom-tab" v-model="titleName1">
          <el-tab-pane label="社保-账户" name="title">
            <!-- 社保账户表格 -->
            <div class="zy-form my-table">
              <template>
                <el-table :data="solicyAccounts" style="width: 100%">
                  <el-table-column prop="tbValue1" label="账户名称">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.name" placeholder maxlength="255" show-word-limit></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="tbValue2" label="社保号">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.account" placeholder maxlength="255" show-word-limit></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="tbValue4" label="备注">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.remarks" maxlength="255" show-word-limit></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="tools" label="操作" width="180">
                    <template slot-scope="scope">
                      <template v-if="true">
                        <el-button
                          size="mini"
                          type="text"
                          @click.native.prevent="deleteRow(scope.$index, solicyAccounts)"
                        >
                          <i class="iconfont icondelet text-danger"></i>
                        </el-button>
                      </template>
                      <template v-if="false">
                        <el-button size="mini" type="text">
                          <i class="iconfont iconcheck-r text-danger"></i>
                        </el-button>
                      </template>
                    </template>
                  </el-table-column>
                </el-table>
              </template>

              <div class="clearfix">
                <el-button class="fr table-add-btn" size="small" @click="addRow(solicyAccounts,0)">
                  <i class="iconfont iconadd"></i> 添加账户
                </el-button>
              </div>
            </div>
            <!-- 社保账户表格结束 -->
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 社保账户结束 -->

      <!-- 社保账户 -->
      <div class="mainContainer m-t20">
        <el-tabs class="custom-tab" v-model="titleName2">
          <el-tab-pane label="公积金-账户" name="title">
            <!-- 公积金账户表格 -->
            <div class="zy-form my-table">
              <template>
                <el-table :data="accfundAccounts" style="width: 100%">
                  <el-table-column prop="tbValue11" label="账户名称">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.name" placeholder maxlength="255" show-word-limit></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="tbValue22" label="公积金号">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.account" placeholder maxlength="255" show-word-limit></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="tbValue44" label="备注">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.remarks" maxlength="255" show-word-limit></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="tools" label="操作" width="180">
                    <template slot-scope="scope">
                      <template v-if="true">
                        <el-button
                          size="mini"
                          type="text"
                          @click.native.prevent="deleteRow(scope.$index, accfundAccounts)"
                        >
                          <i class="iconfont icondelet text-danger"></i>
                        </el-button>
                      </template>
                      <template v-if="false">
                        <el-button size="mini" type="text">
                          <i class="iconfont iconcheck-r text-danger"></i>
                        </el-button>
                      </template>
                    </template>
                  </el-table-column>
                </el-table>
              </template>

              <div class="clearfix">
                <el-button class="fr table-add-btn" size="small" @click="addRow(accfundAccounts,1)">
                  <i class="iconfont iconadd"></i> 添加账户
                </el-button>
              </div>
            </div>
            <!-- 公积金账户表格结束 -->
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 社保账户结束 -->
    </div>

    <div class="page-form-btn">
      <el-button @click="back">取消</el-button>
      <el-button type="primary" @click="saveInsure('company')">保存</el-button>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
import Http2 from "../../libs/http2.js";
import {
  provinceAndCityData,
  CodeToText,
  TextToCode
} from "element-china-area-data";
export default {
  name: "addCompany",
  data() {
    const validatePhone = (rule, value, callback) => {
      //定义规则
      let reg = /^1[345789]\d{9}$/;
      if (value != "" && reg.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的手机号"));
      }
    };
    const validateCompName = (rule, value, callback) => {
      if (value.length < 255) {
        Http.api
          .post("company/validateCompName", {
            serviceType: this.company.serviceType,
            name: this.company.name,
            id: this.company.id
          })
          .then(res => {
            if (res.data == 0) {
              callback();
            } else {
              callback(new Error("服务公司名称已经存在"));
            }
          });
      } else {
        callback(new Error("不能超过255个字符"));
      }
    };
    const checkAddr = (rule, value, callback) => {
      let inputAddr = this.$refs.infoAddr.value;
      if (inputAddr.length < 255) {
        if (value !== 0 && inputAddr != "") {
          callback();
        }
        else {
          return callback(new Error("请填写地址信息"));
        }
      }
      else {
        return callback(new Error("详细地址不能超过255个字符"));
      }
    };
    const validateRincipal = (rule, value, callback) => {
      if (value.length < 255) {
        callback();
      } else {
        return callback(new Error("不能超过255个字符"));
      }
    };
    return {
      // 添加公积金表单
      company: {
        serviceType: "1",
        name: "",
        rincipal: "",
        phone: "",
        province: "",
        city: "",
        citySelect: [],
        addr: "",
        socialCustomerDealind: "0",
        socialCustomerDealindDay: 1,
        accfundCustomerDealind: "0",
        accfundCustomerDealindDay: 1
      },
      titleName1: "title",
      titleName2: "title",
      //社保账户添加行表单
      tbValue1: "",
      tbValue2: "",
      tbValue3: "",
      tbValue4: "",
      // 社保账户表格

      solicyAccounts: [],
      // 公积金账户表格
      accfundAccounts: [],
      //公积金添加行表单
      tbValue11: "",
      tbValue22: "",
      tbValue33: "",
      tbValue44: "",
      // 必填项目
      rules: {
        serviceType: [
          { required: true, message: "请选择服务类类型", trigger: "change" }
        ],
        name: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
          { validator: validateCompName, trigger: "blur" }
        ],
        rincipal: [{ validator: validateRincipal, trigger: "blur" }],
        phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
        citySelect: [
          { required: true, message: "请选择城市", trigger: "change" },
          { validator: checkAddr, trigger: "blur" }
        ]
      },
      // 联系地址
      cities: provinceAndCityData
    };
  },
  created() {},
  methods: {
    test: function() {
      Http.api.get("/serverstatus").then(res => {});
    },
    indexMethod(index) {
      return index + 1;
    },
    gobalValidate: function() {
      this.$refs["company"].validate();
    },
    // 保存
    saveInsure(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if (!this.checkAccounts()) {
            return false;
          }
          console.log(this.company.citySelect);
          this.company.city = CodeToText[this.company.citySelect[1]];
          this.company.province = CodeToText[this.company.citySelect[0]];
          Http.api
            .post("company", {
              company: this.company,
              solicyAccounts: this.solicyAccounts,
              accfundAccounts: this.accfundAccounts
            })
            .then(res => {
              console.log(res);
              this.$message({
                message: "数据已保存",
                center: true,
                iconClass: "iconfont iconcheck",
                customClass: "custom-message"
              });
              this.$router.push({ path: "/company/list" });
            })
            .catch(error => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    checkAccounts() {
      console.log("xx");
      if (!this.checkAccount(this.solicyAccounts, "社保")) {
        return false;
      }
      if (!this.checkAccount(this.accfundAccounts, "公积金")) {
        return false;
      }
      return true;
    },
    checkAccount(data, policyType) {
      var a = new Array();
      for (let i in data) {
        let item = data[i];

        if (item.name == "" || item.account == "") {
          this.$message.error("[" + policyType + "]：账户资料信息没有填写完整");
          return false;
        }
        let key = item.account;
        if (a.indexOf(key) == -1) {
          a.push(key);
        } else {
          this.$message.error(
            "[" + policyType + "]：账户 " + policyType + "号重复"
          );
          return false;
        }
      }
      return true;
    },
    //删除改行
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    // 添加行
    addRow(tableData, event) {
      tableData.push({
        account: "",
        name: "",
        orNo: "",
        type:event,
        remark: "" }
      );
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
